<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { cloneDeep } from 'lodash-es';
  export default defineComponent({
    name: 'barAndLine',
    props: {
      chartData: {
        type: Array,
        default: () => [],
      },
      option: {
        type: Object,
        default: () => ({}),
      },
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: 'calc(100vh - 78px)',
      },
    },
    setup(props) {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
      const option = reactive({
        color:['#C2183E','#2FA0FF','#28F121','#F18F20','#FFDE47','#16E7D2'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          textStyle: {
            color: '#FFFFFF',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            textStyle: {
              color: '#FFFFFF'
            },
          },
          textStyle: {
            color: '#FFFFFF',
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#FFFFFF'
            },
          },
        },
        series: [
          {
            name: 'bar',
            type: 'bar',
            stack: 'Ad',
            data: [],
          },
        ],
      });

      watchEffect(() => {
        props.chartData && initCharts();
      });

      function initCharts() {
        if (props.option) {
          Object.assign(option, cloneDeep(props.option));
        }

        let datetime = [];
        let seriesData = [];
        const names = ['烂瓶类', '调试问题类', '玻璃液问题类', '规格尺寸类', '变形类', '其他类'];
        props.chartData.forEach((dayData,i) => {
          if (dayData?.length > 0) {
            const date = formatDate(dayData[0].time);
            datetime.push(date);

            dayData.forEach((record) => {
              const tagName = record.tagName;
              const pvValue = record.pvValue;

              // 查找或创建tagName的系列数据
              let tagData = seriesData.find((s) => s.name === tagName);
              if (!tagData) {
                tagData = { name: tagName, type: 'bar', stack: 'Ad',barMaxWidth:50, data: [] };
                seriesData.push(tagData);
              }

              // 将pvValue添加到相应的tagName的data数组中
              tagData.data.push(pvValue);
            });
          }
        });
        seriesData.map((v,i)=>{
          v.name = names[i];
        })
        console.log('seriesData',seriesData);
        option.series = seriesData;
        option.xAxis.data = datetime;
        setOptions(option);
      }
      function formatDate(dateStr) {
        const date = new Date(dateStr);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 加1并补零
        const day = date.getDate().toString().padStart(2, '0'); // 补零
        return `${month}-${day}`;
      }
      return { chartRef };
    },
  });
</script>
